import { useAccess, Access, useParams } from '@umijs/max';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Descriptions, Button, Tag, Image, Space, message } from 'antd';
import { useState, useEffect } from 'react';
import { history } from '@umijs/max';

// 模拟商品详情数据
const mockProductDetail = {
  id: '1',
  name: '商品1',
  price: 99.99,
  stock: 100,
  status: 'active',
  description: '这是一个很好的商品，质量上乘，价格实惠。',
  category: '电子产品',
  createTime: '2023-01-01 12:00:00',
  updateTime: '2023-06-01 14:30:00',
  imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
};

const ProductDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const [product, setProduct] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const access = useAccess();

  useEffect(() => {
    // 模拟API请求获取商品详情
    setTimeout(() => {
      setProduct({
        ...mockProductDetail,
        id,
      });
      setLoading(false);
    }, 500);
  }, [id]);

  // 返回列表页
  const handleBack = () => {
    history.push('/products/list');
  };

  // 下架商品
  const handleDeactivate = () => {
    setProduct({
      ...product,
      status: 'inactive',
    });
    message.success('商品已下架');
  };

  // 上架商品
  const handleActivate = () => {
    setProduct({
      ...product,
      status: 'active',
    });
    message.success('商品已上架');
  };

  if (loading) {
    return (
      <PageContainer title="商品详情" loading>
        <Card loading />
      </PageContainer>
    );
  }

  return (
    <PageContainer
      title="商品详情"
      onBack={handleBack}
      extra={
        <Access accessible={access.isSuperAdmin || access.canAccessProducts}>
          <Space>
            <Button type="primary">编辑</Button>
            {product.status === 'active' ? (
              <Button danger onClick={handleDeactivate}>
                下架
              </Button>
            ) : (
              <Button onClick={handleActivate}>上架</Button>
            )}
          </Space>
        </Access>
      }
    >
      <Card>
        <div style={{ display: 'flex', marginBottom: 24 }}>
          <div style={{ marginRight: 24 }}>
            <Image width={200} src={product.imageUrl} />
          </div>
          <div style={{ flex: 1 }}>
            <Descriptions title={product.name} bordered column={1}>
              <Descriptions.Item label="商品ID">{product.id}</Descriptions.Item>
              <Descriptions.Item label="价格">¥{product.price.toFixed(2)}</Descriptions.Item>
              <Descriptions.Item label="库存">{product.stock}</Descriptions.Item>
              <Descriptions.Item label="状态">
                <Tag color={product.status === 'active' ? 'green' : 'red'}>
                  {product.status === 'active' ? '已上架' : '已下架'}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="分类">{product.category}</Descriptions.Item>
              <Descriptions.Item label="创建时间">{product.createTime}</Descriptions.Item>
              <Descriptions.Item label="更新时间">{product.updateTime}</Descriptions.Item>
            </Descriptions>
          </div>
        </div>
        <Card title="商品描述" bordered={false}>
          {product.description}
        </Card>
      </Card>
    </PageContainer>
  );
};

export default ProductDetail;